<template>
  <div class='DjSongList'>
    <van-nav-bar
      title="歌单"
      left-text="返回"
      right-text="按钮"
      left-arrow
      @click-left="onClickLeft"
    >
      <template #right>
        <i class="iconfont icon-sousuo"></i>
      </template>
    </van-nav-bar>
    <div class="vanList">
      <!-- 单个列表展示组件 -->
      <dj-program-show
        v-for="(program, index) in programs.programs"
        :key="program.id"
        :program="program"
        :index="index"
        @storagePlayingSongList="storagePlayingSongList"
      />
      <!-- /单个列表展示组件 -->
    </div>

    <audio-component
      @storagePlayingSongList="storagePlayingSongList"
    />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { NavBar } from 'vant'
import { getProgramList } from '@/api/user'
import audioComponent from '@/components/songComponent/audioComponent'
import djProgramShow from '@/components/DjComponent/DjProgramShow'

export default {
  name: 'DjSongList',
  components: {
    [NavBar.name]: NavBar,
    audioComponent,
    djProgramShow
  },
  props: {
    // 歌单ID
    songListId: {
      required: true
    }
  },
  data () {
    return {
      programs: {} // 列表内展示的歌曲
    }
  },
  computed: {
    ...mapState(['loginData'])
  },
  watch: {},
  created () {
    this.loadingMusic()
  },
  mounted () {},
  methods: {
    onClickLeft () {
      this.$router.back()
    },
    async loadingMusic () {
      // 根据歌单 ID 获取歌单内的歌曲列表
      const { data } = await getProgramList({
        cookie: this.loginData.cookie,
        id: this.songListId
      })
      console.log(data)
      this.programs = data
    },
    storagePlayingSongList () {
      this.$store.commit('setPlayingSongList', this.programs.programs)
    }
  }
}
</script>
<style lang='less' scoped>
.DjSongList {
  height: 100vh;
  background: rgb(245, 245, 245);
  position: relative;
  /deep/ .van-nav-bar__arrow, /deep/ .van-nav-bar__text {
    color: #383838;
  }
  .icon-sousuo {
    font-weight: bold;
    color: #383838;
  }
  .vanList {
    position: fixed;
    bottom: 70px;
    top: 46px;
    left: 0;
    right: 0;
    overflow-y: auto;
  }
}
</style>
